<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Quill</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.6.0/katex.min.css" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.3.0/styles/monokai-sublime.min.css" />
    <link href="//cdn.quilljs.com/1.0.3/quill.snow.css" rel="stylesheet">
</head>
<style>
    .full {
        position: fixed;
        top: 0;
        right: 0;
        left: 0;
        bottom: 0;
        margin: auto;
    }

    #ed {
        background: #fff;
    }

    #editor {
        height: 200px;
    }

    #full {
        float: right;
    }
</style>

<body>
    <h1>Quill</h1>
    <ul>
        <li>ie11+</li>
        <li>自定制化高</li>
        <li>图片采用base64，没有上传接口</li>
        <li>编辑区域必须有真实高度才能使用链接，视频，公式</li>
        <li>公式formula 依赖KaTeX插件，才能正常显示</li>
    </ul>
    <div id="ed">
        <!-- 创建工具栏组件 -->
        <div id="toolbar">
            <!-- 文字 -->
            <select class="ql-font" title="字体"></select>
            <select class="ql-size" title="字号"></select>
            <button class="ql-bold" title="加粗">加粗</button>
            <button class="ql-italic" title="斜体">斜体</button>
            <button class="ql-underline" title="下划线"></button>
            <button class="ql-strike" title="删除线"></button>
            <select class="ql-background" title="背景色">
                <!-- 可自定义<option value="#39f"></option>
                            <option value="#ff0"></option> -->
            </select>
            <select class="ql-color" title="字色"></select>
            <!-- 内容 -->
            <button class="ql-script" value="sub" title="下表"></button>
            <button class="ql-script" value="super" title="上标"></button>
            <button class="ql-header" value="1" title="大标题"></button>
            <button class="ql-header" value="2" title="副标题"></button>
            <button class="ql-blockquote" title="引用"></button>
            <button class="ql-code-block" title="代码"></button>
            <button class="ql-list" value="ordered" title="有序列表"></button>
            <button class="ql-list" value="bullet" title="无序列表"></button>
            <!-- 对齐 -->
            <button class="ql-indent" value="-1" title="反缩进"></button>
            <button class="ql-indent" value="+1" title="缩进"></button>
            <button class="ql-direction" value="rtl"></button>
            <select class="ql-align" title="对齐"></select>
            <!-- 媒体 -->
            <button class="ql-link" title="链接"></button>
            <button class="ql-image" title="图片"></button>
            <button class="ql-video" title="视频"></button>
            <button class="ql-formula" title="公式"></button>
            <!-- 清除 -->
            <button class="ql-clean" title="清除格式"></button>
            <!-- 自定义效果 -->
            <button id="full" title="全屏">
                Full
            </button>
        </div>

        <!-- 创建文本编辑器 -->
        <div id="editor">
            <p>Hello World!</p>
        </div>
    </div>
    <div id="api">
        <!-- <button type="button" onclick="deleteText()">删除文字内容</button>
        <button type="button" onclick="getContent()">获取格式化内容</button>
        <button type="button" onclick="getLength()">获取内容长度</button>

        <button type="button" onclick="setText()">设置文字内容</button>
        <button type="button" onclick="format()">设置选中样式</button>
        <button type="button" onclick="formatLine()">设置数据样式</button>
        <button type="button" onclick="formatText()">设置文字样式X</button>
        <button type="button" onclick="s()">更新数据</button> -->
    </div>
    <script src="//cdnjs.cloudflare.com/ajax/libs/KaTeX/0.6.0/katex.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.3.0/highlight.min.js"></script>
    <script src="//cdn.quilljs.com/1.0.3/quill.js"></script>
    
    <script>
        //json生成 toolbar :toolbarOptions
        var toolbarOptions = [
            ['bold', 'italic', 'underline', 'strike'], // toggled buttons
            ['blockquote', 'code-block'],

            [{
                'header': 1
            }, {
                'header': 2
            }], // custom button values
            [{
                'list': 'ordered'
            }, {
                'list': 'bullet'
            }],
            [{
                'script': 'sub'
            }, {
                'script': 'super'
            }], // superscript/subscript
            [{
                'indent': '-1'
            }, {
                'indent': '+1'
            }], // outdent/indent
            // [{
            //     'direction': 'rtl'
            // }], // text direction

            // [{
            //     'size': ['small', false, 'large', 'huge']
            // }], // custom dropdown
            // [{
            //     'header': [1, 2, 3, 4, 5, 6, false]
            // }],

            [{
                'color': []
            }, {
                'background': []
            }], // dropdown with defaults from theme

            // [{
            //     'font': []
            // }],
            //字体

            [{
                'align': []
            }],//对齐

            ['clean'] // 清除样式
        ];

        //重新注册模块
        // Quill.register(path,target)
       
        var quill = new Quill('#editor', {
            modules: {
                formula: true,//依赖 keTEx 公式排版
                // syntax: false,//代码高亮 
                toolbar: {
                    container: '#toolbar',  // Selector for toolbar container
                    handlers: {
                        //重写方法
                        'image': function (e) {
                            var _this3 = this;
                            var file = document.querySelector(".ql-flie")
                            if (!file) {
                                file = document.createElement("input");
                                file.setAttribute('type', 'file');
                                file.setAttribute('accept', 'image/*');
                                file.className = "ql-flie";
                                document.body.appendChild(file);
                                file.addEventListener('change', function () {
                                    if (file.files != null && file.files[0] != null) {
                                        //光标位置
                                        var range = _this3.quill.getSelection(true);
                                        //new Delta 需要引入 quill-Delta 依赖
                                        // var reader = new FileReader();
                                        // reader.onload = function (e) {
                                        //     _this3.quill.updateContents(new _delta2.default().retain(range.index).delete(range.length).insert({ image: e.target.result }), "user");
                                        //     file.value = "";
                                        // };
                                        // reader.readAsDataURL(file.files[0]);
                                    }
                                })
                            }
                            file.click();
                        }
                    }
                },
                //历史
                history: {
                    delay: 3000, //1000历史记录
                    maxStack: 100, //100历史的撤销/重做栈的最大大小
                    userOnly: false,//false默认所有改变都将得到相同的待遇，不管是用户输入还是API改变，如果为true，只有用户更改会被撤销或重做。
                }
            },
            // 模板样式
            theme: 'snow'
        });
        //键盘按键 QPI
        quill.keyboard.addBinding({
            key: "B", //按键
            shiftKey: true,//shift 按键 ctrlKey,
        }, function (r, t) {
            //r 选中 开始 ，长度
            //t 选中的内容
            console.log(r, t)

            //return true 将不阻止输入
            // return true;
        })
        //全屏
        document.querySelector("#full").addEventListener("click", function () {
            this.classList.toggle("ql-active");
            document.querySelector("#ed").classList.toggle("full");
            var header_h = document.querySelector("#toolbar").clientHeight;
            var w_h = document.documentElement.clientHeight;
            console.log(w_h)
            document.querySelector("#editor").style.height = w_h - header_h + "px";
        })

        //
        document.querySelector(".ql-image").addEventListener("change", function (e) {
            console.log(e)

        }, false)
        // API
        var bool = true;
        var api = [
            //禁用编辑器的编辑功能
            function enable() {
                bool = !bool;
                quill.enable(bool)
            },
            //删除文字(开始，长度)
            function deleteText() {
                quill.deleteText(6, 4);
            },
            // get
            // 获取HTML内容
            function getHtml() {
                var data = quill.root.innerHTML;
                console.log(data);
            },
            // 获取内容
            function getContent() {
                var data = quill.getContents();
                console.log(data);
            },
            // 获取内容长度
            function getLength() {
                var data = quill.getLength();
                console.log(data);
            },
            //获取文字内容
            function getText() {
                var data = quill.getText();
                console.log(data);
            },
            //insetr 
            //添加嵌入资源（index，type,content）
            function insertEmbed() {
                var data = quill.insertEmbed(10, 'image', 'http://quilljs.com/images/cloud.png');
            },
            //添加内容（index，type, {style}）
            function insertText() {
                var data = quill.insertEmbed(5, 'Quill', {
                    'color': '#ffff00',
                    'italic': true
                });
            },
            // set
            function setHtml() {
                quill.root.innerHTML = "<h1>设置内容</h1>";
                //将编辑器的内容替换成自己获得的内容

            },
            //设置内容
            function setContent() {
                quill.setContents([
                    { insert: 'Hello ' },
                    { insert: 'World!', attributes: { bold: true } },
                    { insert: '\n' }
                ]);
            },
            //更新数据
            function updateContents() {
                var v = quill.getContents();
                // 添加到原基础中 retain(保留).delete(删除).insert(添加) 按照从左到右的顺序
                v = v.retain(3).delete(1).insert("quill").retain(1, { bold: true });
                quill.updateContents(new Delta())  // Apply bold to exclamation mark
            },
            //设置文字        
            function setText() {
                quill.setText('<b>Hello</b>');
            },
            // 样式设置
            function format() {
                quill.format('color', 'red');
            },
            // 数据设置（textIndex，length，{style:value}） 
            function formatLine() {
                quill.formatLine(1, 2, 'align', 'right');
            },
            // 无效
            function formatText() {
                quill.formatText(0, 2, 'color', 'blue、');  // right aligns the 'hello' line
            },
            // 获得样式
            function getFormat() {
                quill.setText('Hello World!');
                quill.formatText(0, 2, 'bold', true);
                quill.formatText(1, 2, 'italic', true);
                var d = quill.getFormat(0, 1);  // right aligns the 'hello' line
                console.log(d);
            },
            //删除样式
            function removeFormat() {
                quill.removeFormat(3, 7);
            },

            //history
            // 清除
            function historyClear() {
                quill.history.clear();
            },
            //撤销上次更改
            function undo() {
                quill.history.undo();
            },
            //如果上次更改是撤消，请重做此撤消。否则什么都不做。
            function redo() {
                quill.history.redo();
            },
            // 光标
            //检索像素位置（相对于编辑器容器）和给定位置的选择的尺寸。用户的当前选择不需要在该索引处。用于计算工具提示的放置位置。
            function getBounds() {
                quill.getBounds(7); // Returns { height: '', width: ''0'', left: '', top: '' }
            },
            // 获得光标位置(index引索, length选中)
            function getSelection() {
                var v = quill.getSelection();
                console.log(v);
            },
            // 设置光标位置
            function setSelection() {
                quill.setSelection(0, 5);
            },
            // 关注编辑器并恢复其最后的范围。
            function focus() {
                quill.focus();
            },
            //从编辑器中移除焦点。
            function blur() {
                quill.blur();
            },
            // state
            // 编辑器焦点状态
            function hasFocus() {
                var b = quill.hasFocus();
                console.log("焦点" + b)
            },
            // 如果发生更改，则同步检查编辑器是否有用户更新并触发事件。在需要最新状态的冲突解决期间对协作用例非常有用。源可能是“用户”，“API”或“无声”。
            function upDate() {

                quill.update();
            },
            //测试
            function test() {
                var v = quill.container;
                console.log(v);
            }
        ];

        var obj = document.querySelector("#api");
        for (var k in api) {
            var fn = api[k];

            var o = document.createElement("button");
            o.innerText = (fn.name);
            o.addEventListener("click", fn, false);
            obj.appendChild(o);
        }
        // event on off once
        //输入内容
        quill.on('text-change', function (delta, oldDelta, source) {
            // if (source == 'api') {
            //     console.log("An API call triggered this change.");
            // } else if (source == 'user') {
            //     console.log("A user action triggered this change.");
            // }
        });
        //光标位置改变
        quill.on('selection-change', function (range, oldRange, source) {
            // if (range) {
            //     if (range.length == 0) {
            //         console.log('User cursor is on', range.index);
            //     } else {
            //         var text = quill.getText(range.index, range.length);
            //         console.log('User has highlighted', text);
            //     }
            // } else {
            //     console.log('Cursor not in the editor');
            // }
        });
        //事件触发
        quill.on('editor-change', function (eventName, ...args) {
            // if (eventName === 'text-change') {
            //     // args[0] will be delta
            //     console.log('text-change')
            // } else if (eventName === 'selection-change') {
            //     // args[0] will be old range
            //     console.log('selection-change')
            // }
        });


    </script>
</body>

</html>